<template>
    <div class="firstPageBox">
        <div class="box" v-if="showBox">
            <van-button class="btn" type="danger" @click="showPopup(1)">登录</van-button>
            <van-button class="btn" type="primary" @click="showPopup(2)">注册</van-button>
            <!-- <div class="btn1">登录</div>
            <div class="btn2">注册</div> -->
        </div>
        <div class="box" v-else @click="changeShowBox">
            <span class="text">点我，进入！</span>
        </div>
        <van-popup class="DialogBox" v-model:show="showBottom" :position="direction" :style="{ height: '50%' }">
            <Login v-if="direction === 'bottom'" />
            <Register v-else />
        </van-popup>
    </div>
</template>
<script lang="ts" setup>
import { PopupPosition } from "vant";
import Login from "./components/login.vue"
import Register from "./components/register.vue"
import { ref } from "vue"

const showBottom = ref(false)
const direction = ref<PopupPosition>("bottom")
const showBox = ref(true)
const showPopup = (num: number) => {
    if (num === 1) {
        direction.value = "bottom"
    } else {
        direction.value = "top"
    }
    showBottom.value = true
}
const changeShowBox = () => {
    showBox.value = true
}

</script>
<style lang="less" scoped>
.firstPageBox {
    width: 100vw;
    height: 100vh;
    .box {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .btn {
            width: 100px;
            margin: 30px;
        }
        // .btn1{
        //     width: 100px;
        //     height: 100px;
        //     border-radius: 50px;
        //     // border: 1px solid black;
        //     padding: 30px 0px 0px 30px;
        //     background-image: linear-gradient(to right,rgba(99, 19, 19, 0),rgba(233, 10, 10, 1));
        //     color: white;
        // }
        // .btn2{
        //     width: 100px;
        //     height: 100px;
        //     border-radius: 50px;
        //     // border: 1px solid black;
        //     padding: 30px 0px 0px 30px;
        //     background-image: linear-gradient(to right,rgba(99, 19, 19, 0),rgba(233, 10, 10, 1));
        //     color: white;
        // }
        .text {
            font-weight: bolder;
            animation: siz 1.5s linear infinite;
        }
    }
    .DialogBox {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
@keyframes siz {
    0% {
        color: black;
        font-size: 40px;
    }
    50% {
        color: red;
        font-size: 20px;
    }
    100% {
        color: green;
        font-size: 40px;
    }
}
</style>
